<template>
  <ex-dialog
    width="700px"
    class="ex-diolog"
    :title="title"
    :visible="visible"
    :close-on-click-modal="false"
    @closeDialog="handleClose"
  >
    <div class="main" v-loading="loading">
      <template>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="140px"
          class="demo-ruleForm"
          :disabled="disabled"
        >
          <el-row>
            <el-col :span="18">
              <el-form-item label="服务项目：" prop="serviceItemId">
                <el-select
                  v-model="ruleForm.serviceItemId"
                  filterable
                  placeholder="请选择"
                  size="small"
                >
                  <el-option
                    v-for="item in serviceItemList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="18">
              <el-form-item label="服务客户：" prop="clientIdList">
                <el-select
                  v-model="ruleForm.clientIdList"
                  filterable
                  multiple
                  placeholder="请选择"
                  size="small"
                >
                  <el-option
                    v-for="item in clientIdList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="18">
              <el-form-item label="服务需求说明：" prop="description">
                <el-input type="textarea" maxlength="1000" show-word-limit :autosize="{ minRows: 4, maxRows: 10}" placeholder="请输入" v-model="ruleForm.description" :style="{width: inputWidth}"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>
    </div>
    <div class="button_box">
      <el-button @click="handleClose">取消</el-button>
      <el-button
        type="primary"
        :loading="AgreeLoading"
        @click="submitForm('ruleForm')"
        >保存提交</el-button
      >
    </div>
  </ex-dialog>
</template>
<script>
import Loading from "@/components/Loading/index";
// api
import {
  addService,
  serviceItemSelect,
  clientSelect
} from "@/api/customer/rowDateList";
export default {
  components: {
    Loading,
  },
  props: {
    visible: Boolean,
    id: String,
  },
  data() {
    return {
      labelWidth: "150px",
      inputWidth: "420px",
      title: "创建服务工单",
      loading: false,
      disabled: false,
      AgreeLoading: false,
      serviceItemList: [],
      clientIdList: [],
      ruleForm: {
        clientIdList: [], //客户档案id集合
        serviceItemId: "", //服务项目id（用于记录,这个字段不使用）
        description:"",//服务需求说明
      },
      rules: {
        serviceItemId: [
          { required: true, message: "请选择", trigger: ["change"] },
        ],
        clientIdList: [
          { required: true, message: "请选择", trigger: ["change"] },
        ],
        description: [
            { required: true,message: "请输入服务需求说明",trigger: ["change", "bulr"]}
        ],
      },
    };
  },
  computed: {},
  created() {
    this.getServiceItemSelect();
    this.getClientSelect();

  },
  mounted() {},
  computed: {},
  methods: {
    //服务项目下拉框
    getServiceItemSelect() {
      serviceItemSelect()
        .then((res) => {
          this.serviceItemList = res.result;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    //服务客户下拉
    getClientSelect() {
      clientSelect()
        .then((res) => {
          this.clientIdList = res.result;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    //取消
    handleClose(formName) {
      this.$emit("update:visible", false);
    },
    submitForm(formName) {
      console.log(this.ruleForm);
      //创建确定
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.AgreeLoading = true;
          var data = {
            ...this.ruleForm,
          };
          addService(data)
            .then((res) => {
              this.handleClose();
              this.$message.success("创建成功");
              this.$emit("success",res.result);
              this.AgreeLoading = false;
            })
            .finally(() => {
              this.AgreeLoading = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
  <style lang="scss" scoped>
.ex-diolog {
  ::v-deep .ex--dialog--footer {
    border: none !important;
    padding: 0 !important;
  }

  ::v-deep .ex--dialog--main {
    padding: 10px 20px !important;
  }
}
.el-select,
.el-input,
.el-cascader {
  width: 400px;
}
.main {
  padding: 20px 20px;
}
.button_box {
  display: flex;
  justify-content: center;
}
.el-radio-group {
  display: flex;
  flex-direction: column;
  .el-radio {
    margin-bottom: 14px;
  }
}
.txt {
  font-size: 20px;
  font-weight: 500;
  color: #333;
  border-bottom: 4px solid #1890ff;
  margin-bottom: 20px;
  padding-bottom: 14px;
}
.listTxt {
  display: flex;
  justify-content: flex-start;
  height: 50px;
  align-items: center;
  .left {
    width: 100px;
  }
}
</style>
  